<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="账户编码" prop="code">
          <CodeRuleInput
            :band-value.sync="formData.code"
            table-name="finance_account"
            column-name="code"
            :is-edit="id"
          />
        </el-form-item>
        <el-form-item label="账户名称" prop="accountName">
          <el-input v-model="formData.accountName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input v-model="formData.taxpayerNumber" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="币别" prop="moneyTypeCode">
          <DictSelect
            :band-value.sync="formData.moneyTypeCode"
            dict-type="settlementCurrencyCode"
          />
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="formData.bankName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formData.accountNumber" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formData.phone" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.address" placeholder="请输入" clearable />
        </el-form-item>
        <!--        <template>-->
        <!--          <el-checkbox v-model="checked"></el-checkbox>-->
        <!--        </template>-->
        <el-form-item label="默认账户" class="double">
          <el-checkbox v-model="formData.isDefault" />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-if="!formData.planCode"
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/receivableAndPayable/receivableAndPayableManage/accountManagement'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    isAdd: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      pageData: {
        pageNum: 1,
        pageSize: 9999,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      formData: {
        code: '',
        accountName: '',
        taxpayerNumber: '',
        moneyTypeCode: '',
        bankName: '',
        accountNumber: '',
        remark: '',
        phone: '',
        address: '',
        isDefault: false
      },
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      selectionsAll2: [], // 表格所有页选中的行
      tableDefaultRow: '',
      tableData: [],
      rules: {
        code: [
          { required: true, message: '账户编码不能为空', trigger: 'blur' }
        ],
        accountName: [
          { required: true, message: '账户名称不能为空', trigger: 'blur' }
        ],
        moneyTypeCode: [
          { required: true, message: '请选择币别', trigger: 'change' }
        ]

      }
    }
  },
  created() {
    if (!this.id) {
      this.loading = false
      this.formData.isDefault = true
    } else {
      this.isShow = true
      // 有id就是编辑
      this.getInfo()
      this.formData.id = this.id
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(row) {
      this.selectionsAll = row
    },
    handleSelectionChange2(row) {
      this.selectionsAll2 = row
    },
    getInfo() {
      getInfo(this.id).then((res) => {
        if (res.data.isDefault == '1') {
          res.data.isDefault = true
        } else {
          res.data.isDefault = false
        }
        Object.keys(this.formData).forEach((key) => {
          // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.isShow = true
        this.loading = false
      })
    },
    // 提交
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.formData.isDefault == true) {
            this.formData.isDefault = '1'
          } else {
            this.formData.isDefault = '0'
          }
          addOrUpdate(this.formData).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  padding-left: 20px;
  padding-bottom: 20px;
  font-size: 24px;
  width: 100%;
}
.numberComponents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
  height: 15px;
}
.el-icon-remove {
  font-size: 25px;
  color: red;
  height: 100%;
  width: 100%;
  border: 0px;
  background-color: transparent;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
/deep/ .el-form-item__label {
  text-align: right;
}
.expand_radio {
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
.expand_container {
  .el-form-item {
    margin-bottom: 10px;
  }
  .expand_file {
    margin-bottom: 0px;
  }

  /deep/ .el-form-item__label {
    width: 130px !important;
  }
  /deep/ .el-form-item__content {
    width: 710px !important;
  }
}
.main_main {
  .form_padding {
    padding: 0 !important;
    /deep/ .el-form-item {
      margin-right: 0px;
    }
    /deep/ .el-form-item__label {
      width: 120px !important;
    }
    /deep/ .el-form-item__content {
      width: 270px;
    }
    .remark {
      /deep/ .el-form-item__content {
        width: 690px !important;
        height: 60px;
        overflow-y: auto;
      }
    }
  }
}
/deep/ .el-table th.el-table__cell > .cell {
  position: unset;
}
</style>
